<template>
  <div id="app">



<!--添加按钮-->
    <el-button type="success" icon="el-icon-check"  @click="dialogFormVisible = true"  circle></el-button>
    <template>
      <el-table
          :data="fileimgList"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="id"
            width="226">
        </el-table-column>
        <el-table-column
            width="227px"
            label="轮播图">

          <template  slot-scope="props">

            <el-image
                style="width: 50px; height: 50px"
                :src="props.row.pic"
                :preview-src-list="props.row.pic">
            </el-image>

          </template>



        </el-table-column>
        <el-table-column
            width="226px"
            label="操作">

          <template  slot-scope="props">
           <el-button type="danger" icon="el-icon-delete" @click="deleteBanner(props.$index)" circle></el-button>
          </template>

        </el-table-column>
      </el-table>
    </template>





    <!--添加轮播图-->
    <el-dialog title="添加轮播图" :visible.sync="dialogFormVisible">
      <el-form :rules="specFormrules" :model="BannerInfo">
        <el-form-item label="名称" label-width="100px">
          <el-input v-model="BannerInfo.title" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="所属类别" label-width="100px">
          <el-select v-model="BannerInfo.sort" placeholder="请选择">
            <el-option
                v-for="item in types"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="图片上传" label-width="100px">
          <el-upload
              class="upload-demo"
              action="http://192.168.110.110:8082/api/plug/uploadImages"
              :on-change="handleChange"
              :on-success="imglist"
              :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="upBanner">确 定</el-button>
      </div>
    </el-dialog>





  </div>
</template>

<script>
export default {
  data() {
    return {

      fileList: [],
      fileimgList: [],

      dialogFormVisible: false,


      BannerInfo: {
        title: '',
        sort: 1,
        upImg: '',
      },
      types: '',


      specFormrules: {
        spec: [
          { required: true, message: '请输入规格', trigger: 'blur' },
        ],
      }



    }
  },
  created() {
    this.getTypes()
    this.getBanner();
  },
  methods: {
    // 获取轮播图get?
    async getBanner() {
      await this.$http.post("/Admin/bannerList").then(res =>{
        this.fileimgList = res.data.data;
        console.log(this.fileimgList);
      }).catch(err =>{
        console.log("getBanner err => ",err);
      })
    },






    // 删除轮播图
    async deleteBanner(index) {
      console.log(this.fileimgList[index])
      await this.$http.post("/Admin/delBanner",{
        id: this.fileimgList[index].id,
      }).then(res =>{
        console.log(res)
      }).catch(err =>{
        console.log("deleteBanner err => ",err)
      })
    },




// 添加轮播图
    async upBanner() {

      if (this.BannerInfo.title === '' || this.BannerInfo.pic === ''){
        window.alert("未添加内容");
        return
      }


      console.log("upimg this.BannerInfo.upImg",this.BannerInfo.upImg)
      await this.$http.post("/Admin/addBanner",{
        title: this.BannerInfo.title,
        pic: this.BannerInfo.pic,
        sort: this.BannerInfo.sort,
      }).then(res =>{
        console.log(res);
        this.dialogFormVisible = false
      }).catch(err =>{
        console.log("error err =>", err);
      })
    },



    // 分类请求--重复
    async getTypes() {
      await this.$http.post("/admin/typeList").then(res => {
        console.log(res);
        this.types = res.data.data;
      }).catch(err => {
        console.log("son1 getTypes err => ", err);
      })
    },

    // 图片上传
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    imglist(response, file, fileList) {
      // this.foodForm.imglist.push(response.data.url);
      // console.log(response.data);
      this.BannerInfo.upImg = response.data;
    },

  },
}
</script>

<style lang="less" scoped>
.el-button {
  margin:12px;
  box-shadow:  19px 19px 38px #d9d9d9,
    -19px -19px 38px #ffffff;
}

</style>
